<template>
  <div class="table-wrapper">
    <div class="table-base">
      <header>
        <template>
          <slot name="header"></slot>
        </template>
      </header>
      <el-table
        :data="tableData"
        stripe
        :height="height"
        style="width: 100%;"
        v-loading="loading"
        :header-cell-style="tableHeaderColor"
        :row-style="tableRowStyle"
      >
        <template>
          <slot name="table"></slot>
        </template>
      </el-table>
    </div>
    <div class="block" v-if="showPagiantion">
      <el-pagination
        class="center-pg"
        v-loading="loading"
        background
        :current-page.sync="pageNo"
        @current-change="handleCurrentChange"
        :page-size="cpPageSize"
        layout="total, prev, pager, next"
        :total="len"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  props: {
    tableData: {
      type: Array
    },
    len: {
      type: Number
    },
    pageNum: "",
    pageSize: "",
    pageName: "",
    rowStyle: "",
    titleStyle: "",
    loading: false,
    height: {
      type:String
    }
  },
  data() {
    return {
      showPagiantion: false,
      pageNo: 1,
      cpPageSize: "10"
    };
  },
  watch: {
    len(newVal) {
      console.log(this.len);
      this.len = newVal;
      //   this.showPagiantion = this.len > this.cpPageSize ? true : false
      this.showPagiantion = true;
    },
    loading(newVal) {
      this.loading = newVal;
    },
    pageNum(newVal) {
      console.log(newVal);
      this.pageNo = newVal;
    },
    pageSize: {
      handler(newVal) {
        this.cpPageSize = newVal ? newVal : 10;
      },
      immediate: true
    },
    height(newVal) {
      this.height = newVal;
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.pageNo = val;
      this.$emit("page-change", val); // 传递val请求分页数据
      console.log(`当前页: ${val}`);
    },
    storageCurrentPage() {
      window.addEventListener("beforeunload", () => {
        sessionStorage.setItem(this.pageName, this.pageNo);
      });

      var currentPage = sessionStorage.getItem(this.pageName);
      if (currentPage) {
        // 一定要把缓存中的currentPage传递出去,不然外层pageNo就是初始值
        this.$emit("currentpage-change", currentPage);
        this.pageNo = Number(currentPage);
      }
    },
    // 修改table tr行的背景色
    tableRowStyle({ row, rowIndex }) {
      return this.rowStyle;
    },
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return this.titleStyle;
      }
    }
  },
  mounted() {
    this.storageCurrentPage();
  },
  beforeDestroy() {
    this.pageNo = 1;
    sessionStorage.removeItem(this.pageName); //不在第一页时离开当前页--下次进来就是从第一个开始展示
  }
};
</script>
<style lang="scss" scoped>
.table-base >>> .el-table{
  height: 400px;
  overflow-y: scroll;
}
.table-wrapper {
  .table-base {
    //padding: 20px;
    padding-bottom: 20px;
    // min-height:calc(83vh); //sticky布局
    box-sizing: border-box;
  }
  .block {
    .center-pg {
      display: inline-block;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>
